嗨，各位鐵人夥伴！ 👋
這是一篇專為新手設計的文章。如果你是經驗豐富的老手，可以跳過這篇，或者把它分享給你沒時間親自指導的新人，解放你的寶貴時間！ 😉
本文會用最淺顯易懂的方式，簡單快速的說明 前端的與後端概要，讓完全沒有基礎的讀者也能輕鬆理解，但同時我也深入多解釋一些，不是只會單純跟你說前端是畫面後端是邏輯。
「前端」、「後端」、「前端工程師」、「後端工程師」... 這些詞彙你可能常常聽到，但總覺得似懂非懂？別擔心，今天就讓我用最白話的方式，一次為你解釋清楚！
在深入之前，有個小提醒：我翻閱了許多資料，發現要給前端和後端一個「精準無爭議」的定義其實很難。但業界有一個廣泛的共識，主要圍繞著程式碼在哪裡運行：
💻 前端 (Frontend)：關乎使用者介面 (UI) 和使用者體驗 (UX) 的一切。程式碼主要在 使用者設備 (Client-Side) 上運行（例如你的電腦瀏覽器、手機 App），負責呈現畫面、處理互動，並確保應用程式在各種裝置上都能順暢美觀。
⚙️ 後端 (Backend)：關乎伺服器、資料和商業邏輯的一切。程式碼在 遠端主機 (Server-Side) 上運行，負責處理核心業務邏輯、與資料庫溝通、驗證使用者身份、確保系統安全，並提供前端所需的資料。
這是一個常見的誤解！ 前端也包含複雜的邏輯。一個典型的例子是「即時搜尋與篩選」功能。當你在網頁上輸入文字時，前端程式碼會直接在你的瀏覽器中處理資料的過濾和排序，提供流暢無延遲的體驗。這就是跑在 Client-Side 的邏輯。
所以，區分前後端的關鍵，不在於「有沒有邏輯」，而在於「邏輯在哪裡執行」。
聽起來還是有點複雜？沒關係，我們先從了解各自的技術開始吧！
前端技術博大精深，這裡我們只做最概要的簡介，讓你快速建立基本概念。
我們以最常見的 Web 應用程式（也就是你用瀏覽器開的網頁或系統）為例。在這種情境下，前端的核心技術離不開三劍客：HTML, CSS, 和 JavaScript。
HTML 負責定義網頁的 結構 與 內容。它會告訴瀏覽器：「嘿，這裡有一個標題、一個段落和一個按鈕。」
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端互動範例</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>前端互動範例</h1>
<p id="demoText">點擊下方按鈕，我會變！</p>
<button id="myButton">點我！</button>
<script src="script.js"></script>
</body>
</html>
CSS 負責網頁的 外觀 與 樣式。它決定了元素的長相，例如按鈕的顏色、文字的大小、區塊的間距等，讓頁面看起來更美觀。
/* style.css */
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#demoText {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
#myButton {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#myButton:hover {
background-color: #0056b3;
}
JavaScript 負責處理 互動行為 與 前端邏輯。它讓頁面「動起來」。例如，它定義了當按鈕被點擊時，要執行什麼操作。
// script.js
// 1. 找到 HTML 中的按鈕
const button = document.getElementById('myButton');
// 2. 找到 HTML 中的文字段落
const text = document.getElementById('demoText');
// 3. 設定按鈕的「事件監聽器」
// 意思是：當這個按鈕被「點擊 (click)」時，就執行後面的函數
button.addEventListener('click', function () {
// 4. 按下按鈕後，會執行的邏輯：
// 將文字的內容改為「你點擊了我！」
text.textContent = '你點擊了我！';
});
從上面的例子可以看出，嚴格來說，HTML 和 CSS 算是「標記語言」，而 JavaScript 則是不折不扣的「程式語言」，能夠處理非常複雜的邏輯。
你可能聽過前端三大主流技術：React, Vue, Angular。這些工具（無論是框架或函式庫）都是基於 JavaScript 發展而來，它們的出現是為了解決日益複雜的前端需求，提升開發效率與維護品質。
你可以把它們想像成 開發懶人包：裡面預先寫好了許多常用功能和架構，讓工程師不必從零開始「造輪子」，可以更快地開發出穩定、高效的應用程式。
補充：無論使用哪種框架，經過 打包（Bundle）和編譯（Compile） 後，最終產生的仍然是瀏覽器唯一看得懂的 HTML, CSS, 和 JavaScript。
後端技術同樣博大精深。簡單來說，後端主要處理 業務邏輯 (Business Logic)。
「業務邏輯」泛指系統運作的核心規則，例如：
這些都屬於後端的範疇。
你可能會問：「既然前端的 JavaScript 也能處理邏輯，為什麼不直接讓前端把資料存進資料庫就好了？」
答案很簡單，但至關重要：安全性。
前端的程式碼跑在用戶的設備上，這意味著它 可以被輕易地檢視和竄改。如果把重要的驗證邏輯（如檢查帳戶餘額）放在前端，駭客就能繞過檢查，為所欲為。
而後端程式碼跑在 受保護的伺服器 上，使用者無法直接接觸。因此，所有與 資料存取、權限驗證、交易處理 相關的核心邏輯，都必須放在後端，才能確保系統的穩定與安全。
後端還有一個重點在於，要去思考資料庫的資料怎麼存，怎麼操作，怎麼處理，也就是怎麼跟 DB 溝通？
你會覺得這簡單？ 不？ 資料的關聯可學識博大精深，甚至可以說很多後端工程師或架構師在討論需求的時候，腦袋裡都在想這資料怎麼存放
這需要提到資料正規劃(請看後續章節 Day 18: 🗺️ 設計的藍圖：ER Model, 主外鍵與索引 (Index))
後端的選擇非常多樣，在台灣的大型甲方企業級 Web 應用中，常見的後端語言有：
[!NOTE] > 聲明：不負責任且沒有要戰的淺淺討論
以下是針對「台灣大型甲方公司」的 Web Application 後端生態的個人觀察：
- Java 與 C# (ASP.NET Core)：在企業級應用中佔有相當大的比重。這背後有許多歷史、生態系、找人難易度等因素，此處不深入避免引戰。
- Python, Go：近年來在新專案中的採用率有明顯提升的趨勢，在國外尤其如此。
- Javascript(Node.js)：對你沒看錯，Javascript可以跑在Server，也可以拿寫後端，得益於Node.js(JavaScript runtime environment)。
- Python：除了 Web 開發，Python 在資料科學、數據工程、AI 領域幾乎處於主導地位，這也是它近年來如此熱門的原因。
- PHP：雖然在大型甲方公司的新案中較少見（可能與一些歷史資安印象有關），但其全球市佔率依然非常高，尤其在中小型網站、電商和內容管理系統（如 WordPress）領域，實力強勁。Respect！
- COBOL：在許多金融業的核心系統（特別是大型主機）中，依然扮演著關鍵角色。
- 其他語言：未被列出的語言不代表不重要，可能只是在上述特定場景較少見，或是我個人遺漏了。
小提醒：選擇哪種語言通常取決於公司策略、團隊技能、專案需求、生態系成熟度等多重因素。每種語言都有其優勢和適合的場景，沒有絕對的好壞之分。
最常見的方式是透過 API (Application Programming Interface)。
API 是一種介面，它定義了前後端之間資料交換的規則與格式，讓不同系統能夠相互溝通。當前端需要資料或執行特定功能時，它會向後端發出 API 請求。後端處理完畢後，會將結果透過 API 回傳給前端。
關於 API 的詳細介紹，我們會在後續的文章 (Day 7: 🗣️ 溝通的語言：API, JSON, XML 與 RESTful) 中深入探討。
一個稍有規模的軟體專案，通常像一個團隊合作的電影劇組，各司其職。以下是一些常見的角色：
iThome鐵人賽
看影片追技術
看更多